<template>
  <div id="pdfDom1">
    <div style="width:1074px;margin: auto;">
      <div id="basic" style="margin: auto">
        <div style="">
          <div style=" width: 100%; background-color:#2ab28b;  text-align: center; margin:auto">
            <div style="font-size: 40px; font-weight: bold; color: #ffffff;padding-top:20px;">{{ Titlename }}</div>
            <!-- <span style="font-size: 30px; color: #666666; margin-left: 20px;display: block;">基本信息报告</span> -->
            <div style="margin-top:30px;font-size: 24px;padding-bottom: 20px;font-weight: bold;color:#333333;">
              儿童{{ diseases > 1 ? '多疾病' : diseasess }}一日三餐膳食推荐</div>
          </div>
        </div>
      </div>
      <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;">
        <div><img src="../assets/img/12.jpg" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">儿童基本信息</div>
      </div>
      <div
        style="width: 1070px; border-top: 2px solid #09a578; border-right: 2px solid #09a578;  margin-top: 10px;font-size: 14px;"
        v-if="times == 2">
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            儿童姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.username ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            性别
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.sex == 1 ? '女' : '男' ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            出生日期
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ birth ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            年龄
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ births }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            身高
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.height ? contents.height + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            体重
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.weight ? contents.weight + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            监护人姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_name ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人手机号
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_mobile ?? '[]' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            检测日期</div>
          <div style="width: 40%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;border-right: 2px solid #09a578;">
            {{ report_time }}
          </div>
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            BMI</div>
          <div style="width: 40%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;">
            {{ BMIs }}
          </div>
        </div>
      </div>
      <div style="width: 1070px; border-top: 2px solid #09a578; border-right: 2px solid #09a578;  margin-top: 10px"
        v-if="times == 1">
        <div style="display: flex">
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            检测日期</div>
          <div style="width: 90%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;">
            {{ report_time }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            儿童姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.username ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            性别
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.sex == 1 ? '女' : '男' ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            出生日期
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ birth ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人姓名
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_name ?? '[]' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人手机号
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.guardian_mobile ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            身高
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.height ? contents.height + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.weight ? contents.weight + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            头围
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.touwei ? contents.touwei + 'CM' : '' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生身长
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.chushengsg ? contents.chushengsg + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.chushengtz ? contents.chushengtz + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            腹围
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.fuwei ? contents.fuwei + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            血型
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.xuexing_value ? contents.xuexing_value : '' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            民族
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.minzu_value ? contents.minzu_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            与监护人关系
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.guanxi_value ? contents.guanxi_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            家长受教育程度
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.jiaoyu_value ? contents.jiaoyu_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生情况
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.birthSituation_value ? contents.birthSituation_value : '' }}
          </div>
        </div>
      </div>
      <!-- 推荐能量值 -->
      <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;">
        <div><img src="../assets/img/12.jpg" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">能量推荐标准值</div>
      </div>
      <div style="display: flex;margin-top: 10px;">
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;font-size: 14px;">
            能量推荐标准值</div>
          <div style="width: 90%; height: 40px; border-bottom: 1px solid #09a578; line-height: 40px; text-indent: 20px;border-right: 1px solid #09a578;border-top: 1px solid #09a578;">
            {{ energy_1  }}~{{ energy_2 }}
          </div>
      </div>
      <div style="display: flex;margin-top: 10px;">
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;font-size: 14px;">
            能量建议摄入值</div>
          <div style="width: 90%; height: 40px; border-bottom: 1px solid #09a578; line-height: 40px; text-indent: 20px;border-right: 1px solid #09a578;border-top: 1px solid #09a578;">
            {{ energyMin  }}~{{ energyMax }}
          </div>
      </div>
      <!-- 建议能量值 -->
      <!-- 膳食推荐 -->
      <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;">
        <div><img src="../assets/img/12.jpg" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">能量一日膳食推荐</div>
      </div>
      <div style="margin-top: 20px;border:2px solid #2ab28b;">
        <div style="display: flex;">
          <div class="plates">
            <div class="time-type time-left-color">早餐</div>
            <div class="der">
              <div style="margin-left: 6%; padding-top: 6%">
                <span class="plates-top-img" v-for="breakfast in Opinion_1" :key="breakfast"><img
                    v-if="breakfast.meal_image" :src="'http://' + baseUrl + '/' + breakfast.meal_image" alt=""
                    style="width: 100px; height: 100px" /></span>
                <span class="plates-top-img" v-for="earlier in Opinion_2" :key="earlier"><img v-if="earlier.meal_image"
                    :src="'http://' + baseUrl + '/' + earlier.meal_image" alt=""
                    style="width: 100px; height: 100px" /></span>
              </div>
            </div>
            <div class="platesFoods">
              <div>
                早餐7:00:
                <span v-for="breakfast in Opinion_1" :key="breakfast">
                  <o v-if="breakfast.food_name" class="foodsNames">{{ breakfast.food_name }}</o>
                  <o v-if="breakfast.weight">重量:{{
                    breakfast.weight
                  }}g;</o>
                </span>
              </div>
              <div>
                早点10:00:
                <span v-for="earlier in Opinion_2" :key="earlier">
                  <o class="foodsNames" v-if="earlier.food_name">{{ earlier.food_name }}</o>
                  <o v-if="earlier.weight">重量:{{
                    earlier.weight
                  }}g;</o>
                </span>
              </div>
            </div>
          </div>

          <div class="plates">
            <div class="time-type time-common-color">午餐</div>
            <div class="der">
              <div style="margin-left: 6%; padding-top: 6%">
                <span class="plates-top-img" v-for="lunch in Opinion_3" :key="lunch"><img v-if="lunch.meal_image"
                    :src="'http://' + baseUrl + '/' + lunch.meal_image" alt=""
                    style="width: 100px; height: 100px" /></span>
                <span class="plates-top-img" v-for="noon in Opinion_4" :key="noon"><img v-if="noon.meal_image"
                    :src="'http://' + baseUrl + '/' + noon.meal_image" alt=""
                    style="width: 100px; height: 100px" /></span>
              </div>
            </div>

            <div class="platesFoods">
              <div>
                午餐12:00:
                <span v-for="lunch in Opinion_3" :key="lunch">
                  <o class="foodsNames" v-if="lunch.food_name">{{ lunch.food_name }}</o>
                  <o v-if="lunch.weight">重量:{{
                    lunch.weight
                  }}g;</o>
                </span>
              </div>
              <div>
                午点15:00:
                <span v-for="noon in Opinion_4" :key="noon">
                  <o class="foodsNames" v-if="noon.food_name">{{ noon.food_name }}</o>
                  <o v-if="noon.weight">重量:{{
                    noon.weight
                  }}g;</o>
                </span>
              </div>
            </div>
          </div>

          <div class="plates">
            <div class="time-type time-right-color">晚餐</div>
            <div class="der">
              <div style="margin-left: 6%; padding-top: 6%">
                <span class="plates-top-img" v-for="dinner in Opinion_5" :key="dinner"><img v-if="dinner.meal_image"
                    :src="'http://' + baseUrl + '/' + dinner.meal_image" alt=""
                    style="width: 100px; height: 100px" /></span>
                <span class="plates-top-img" v-for="late in Opinion_6" :key="late"><img v-if="late.meal_image"
                    :src="'http://' + baseUrl + '/' + late.meal_image" alt=""
                    style="width: 100px; height: 100px" /></span>
              </div>
            </div>

            <div class="platesFoods">
              <div>
                晚餐18:00:
                <span v-for="dinner in Opinion_5" :key="dinner">
                  <o class="foodsNames" v-if="dinner.food_name">{{ dinner.food_name }}</o>
                  <o v-if="dinner.weight">重量:{{
                    dinner.weight
                  }}g;</o>
                </span>
              </div>
              <div>
                晚点21:00:
                <span v-for="late in Opinion_6" :key="late">
                  <o class="foodsNames" v-if="late.food_name">{{ late.food_name }}</o>
                  <o v-if="late.weight">重量:{{
                    late.weight
                  }}g;</o>
                </span>
              </div>
            </div>
          </div>
        </div>
        
      </div>
      <!-- 临床建议 -->
      <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;">
        <div><img src="../assets/img/12.jpg" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">临床建议</div>
      </div>
      <div style="display: flex;margin-top: 10px;border: 1px solid #09a578;height:200px;padding:10px 10px;">
          {{ FeedingRecommendations }}
      </div>
      <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;">
        <div><img src="../assets/img/12.jpg" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">医生建议</div>
      </div>
      <div style="display: flex;margin-top: 10px;border: 1px solid #09a578;height:200px;">
          
      </div>
      <!-- 医生建议 -->
      <div style="display: flex;margin-top: 10px;">
          
      </div>
            <div style="width: 30%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              主治医师
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{Doctor}}</div>
          </div>
          <div style="width: 30%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              检测护士
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{Doctor1}}</div>
          </div>
      <div style="width: 30%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              报告日期
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{report_time}}</div>
      </div>
      <!-- 底部二维码 -->
      <div v-if="code_1 == 'true'"
          style="margin-top: 20px;height:200px;text-align: end;margin-right: 50px;margin-bottom:50px;">
          <img style="width: 200px;height:200px;" :src="'http://' + baseUrl + '/' + codeimg" alt="">
          <div style="margin-top:10px;font-size: 20px;font-weight: bold;">
            扫码关注公众号,获取在线报告
          </div>
        </div>
    </div>
  </div>
</template>
  
<script setup>
import { Edit, CirclePlus, Search, Expand } from "@element-plus/icons-vue";
import { defineComponent, onMounted, ref, watch, reactive } from "vue";
import Header from "./common/Header.vue";
import ChildLeft from "./common/ChildLeft.vue";
import { useRoute, useRouter } from "vue-router";
import http, { baseUrl } from "../utils/http";
import Drawer from "./common/Drawer.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as api from "../api/loginHttp";
const route = useRoute();
const router = useRouter();
const input_min = ref("");
const input_max = ref("");
const cookbook = ref(false);
const labName = ref();
const birth = ref();
const code_1 = ref(false);
const codeimg = ref();
const contents = ref({})
const Doctor=ref()
const Doctor1=ref()
const options = ref([
  {
    value: "早餐",
    label: "早餐",
  },
  {
    value: "中餐",
    label: "中餐",
  },
  {
    value: "晚餐",
    label: "晚餐",
  },
]);
const Titlename = ref()
const checkList = ref([]);
const tan = ref(true);
const loadings = ref(true);
const list = ref({});
const energy = ref(0);
const energys = ref();
const OilEnergy = ref(0);
const drawer = ref(false);
const energy_1 = ref();
const energy_2 = ref();
const diseases = ref();
const diseasess = ref();
const Opinion_1 = ref();
const Opinion_2 = ref();
const Opinion_3 = ref();
const times=ref();
const Opinion_4 = ref();
const Opinion_5 = ref();
const Opinion_6 = ref();
const groupId = ref();
const id = ref();
const report_time = ref();
const reportId = ref();
const popWriteDirection = ref("ttb");
const births=ref();
const BMIs=ref();
const energyMin=ref();
const energyMax=ref();
const FeedingRecommendations = ref(); //喂养建议
const pageList = async () => {
  await router.push({ path: "/pageList/" + groupId.value });
};
const size = ref("150%");

const formInline = ref({
  Fat: "",
  FatMin: "",
  FatMax: "",
  Bone: "",
  BoneMin: "",
  BoneMax: "",
  Protein: "",
  ProteinMin: "",
  ProteinMax: "",
  Water: "",
  WaterMin: "",
  WaterMax: "",
  LBM: "",
  ICW: "",
  Weight: "",
  WeightMin: "",
  WeightMax: "",
  Muscle: "",
  MuscleMin: "",
  MuscleMax: "",
  PBF: "",
  PBFMin: "",
  PBFMax: "",
  SMM: "",
  SMMMin: "",
  SMMMax: "",
  BMI: "",
  BMIMin: "",
  BMIMax: "",
  WHR: "",
  WHRMin: "",
  WHRMax: "",
  Weight_control: "",
  Fat_control: "",
  Muscle_control: "",
  VFI: "",
  VFIMin: "",
  VFIMax: "",
  Edema: "",
  EdemaMin: "",
  EdemaMax: "",
  ECW: "",
  BMR: "",
});

const onHome = async () => {
  await router.push({ path: "/Home" });
};

const onChange = async (index, value) => {
  list._rawValue[index].energy = (
    list._rawValue[index].single.energy * value
  ).toFixed(2);
  list._rawValue[index].weight = (
    list._rawValue[index].single.weight * value
  ).toFixed(2);
  list._rawValue[index].protein = (
    list._rawValue[index].single.protein * value
  ).toFixed(2);
  list._rawValue[index].fat = (
    list._rawValue[index].single.fat * value
  ).toFixed(2);
  list._rawValue[index].carbohydrate = (
    list._rawValue[index].single.carbohydrate * value
  ).toFixed(2);
  list._rawValue[index].calcium = (
    list._rawValue[index].single.calcium * value
  ).toFixed(2);
  list._rawValue[index].sodium = (
    list._rawValue[index].single.sodium * value
  ).toFixed(2);
  list._rawValue[index].magnesium = (
    list._rawValue[index].single.magnesium * value
  ).toFixed(2);
  list._rawValue[index].iron = (
    list._rawValue[index].single.iron * value
  ).toFixed(2);
  list._rawValue[index].zinc = (
    list._rawValue[index].single.zinc * value
  ).toFixed(2);
  list._rawValue[index].selenium = (
    list._rawValue[index].single.selenium * value
  ).toFixed(2);
  list._rawValue[index].vitamin_a = (
    list._rawValue[index].single.vitamin_a * value
  ).toFixed(2);
  list._rawValue[index].vitamin_e = (
    list._rawValue[index].single.vitamin_e * value
  ).toFixed(2);
  list._rawValue[index].vitamin_b1 = (
    list._rawValue[index].single.vitamin_b1 * value
  ).toFixed(2);
  list._rawValue[index].vitamin_b2 = (
    list._rawValue[index].single.vitamin_b2 * value
  ).toFixed(2);
  list._rawValue[index].vitamin_c = (
    list._rawValue[index].single.vitamin_c * value
  ).toFixed(2);

  energys.value = 0;
  for (let i = 0; i < list._rawValue.length; i++) {
    energys.value += list._rawValue[i].energy * 1;
    console.log(list._rawValue[i].energy);
  }
};

const btn_fenxi = async () => {
  let params = {
    id: reportId.value,
    user_id: id.value,
    diet_energy: energy._value,
    diet: list._rawValue,
  };

  const data = await api.diet(params);

  if (data.data.code == 0) {
    ElMessage.error(data.data.msg);
    return false;
  } else {
    const { href } = await router.resolve({
      path: "/Dietary/" + groupId.value + "/" + id.value + "/" + reportId.value,
    });
    window.open(href, "_blank");
  }
};
const prints = async () => {
  const { href } = await router.resolve({
    path: "/Cookbook/" + groupId.value + "/" + id.value + "/" + reportId.value,
  });
  window.open(href, "_blank");
};

const cancelClick = async () => {
  popWrite.value = false;
};

const confirmClick = async () => {
  Object.keys(formInline._rawValue).forEach(function (item, index) {
    //item 就是当日按循环到的对象
    //index是循环的索引，从0开始
    if (formInline._rawValue[item] == "") {
      ElMessage.error("必填项不能为空");
      return;
    }
    // console.log(formInline._rawValue[item]);
  });

  // for(let i = 0; i < Object.keys(formInline._rawValue).length; i++) {
  //   console.log(i);
  //   console.log(formInline._rawValue[i]);
  //   if (formInline.value[i] == '') {
  //     ElMessage.error('必填项不能为空')
  //     return false;
  //   }
  // }
};

const get_new = async () => {
  const res = await api.getFood();
};

// const handClick = async ()  => {
//   console.log('手动输入体成分数据');
// }

const handClick = async () => {
  popWrite.value = true;
};

const appraisal = async () => {
  http
    .get("api/archives/analysis?id=" + id.value + "&type=analysis")
    .then((res) => {
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg);
      }
    });
};

const guanbi = async () => {
  tan.value = false;
  http
    .get("api/archives/analysis?id=" + id.value + "&type=cancel")
    .then((res) => {
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg);
      }
    });
};

const goto = async () => {
  const { href } = await router.resolve({
    path: "/analysis/" + groupId.value + "/" + id.value + "/" + reportId.value,
  });
  window.open(href, "_blank");
};

const btn = async () => {
  // // 只要点击文档，那么就将数据保存起来
  http
    .get("api/archives/setReportStatus?reportId=" + reportId.value)
    .then((res) => {
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg);
        return false;
      }
    });
  const { href } = await router.resolve({
    path:
      "/reportView/" + groupId.value + "/" + id.value + "/" + reportId.value,
  });
  window.open(href, "_blank");
};

const fetchData = async () => {
  if (route.params.groupId) {
    groupId.value = route.params.groupId;
    id.value = route.params.id;
    reportId.value = route.params.reportId;
    codeimg.value = window.localStorage.getItem('ercode')
    if (groupId.value == 3) {
      labName.value = "婴幼儿营养测评";
    } else if (groupId.value == 5) {
      labName.value = "孕产妇营养测评";
    } else if (groupId.value == 6) {
      labName.value = "成年人营养测评";
    } else if (groupId.value == 7) {
      labName.value = "慢性病营养测评";
    } else if (groupId.value == 8) {
      labName.value = "团体营养测评";
    }

    //获取医生输入的建议能量范围值
    energyMin.value= localStorage.getItem('energyMin');
    energyMax.value= localStorage.getItem('energyMax');

    //获取推荐能量值
    let params = {
      'groupId': groupId.value,
      'id': id.value,
      'reportId': reportId.value,
    }
    const ress = await api.energy(params)
    energy_1.value=ress.data.data.packAge[0].start_package
    energy_2.value=ress.data.data.packAge[0].end_package
    //获取二维码是否显示
    http.get('api/index/getAuth').then((res) => {
      let aray = res.data.data;
      let array = aray.split(',');
      if (array.includes('12')) {
        code_1.value = 'true'
      } else {
        code_1.value = 'false'
      }
    })  
    //获取用户年龄
    http.get("api/archives/evaluating?id=" + id.value ).then((res) => {
      births.value=res.data.data.birth;
    });
    http.get('api/archives/viewreport?id=' + reportId.value ).then((res) => {
      if (!FeedingRecommendations.value && BMIs.value<18.5) {
        FeedingRecommendations.value = res.data.data.foodproposal.filter(item => { return item.proposal_type == 1 }).filter(item => { return item.up_type == 2 })[0].content.replace(/<.*?>/ig, "");
      }else if(!FeedingRecommendations.value && BMIs.value>=18.5 && BMIs.value<24) {
        FeedingRecommendations.value = res.data.data.foodproposal.filter(item => { return item.proposal_type == 1 }).filter(item => { return item.up_type == 3 })[0].content.replace(/<.*?>/ig, "");
      }else{
        FeedingRecommendations.value = res.data.data.foodproposal.filter(item => { return item.proposal_type == 1 }).filter(item => { return item.up_type == 1 })[0].content.replace(/<.*?>/ig, "");
      }
    })
    http.get("api/archives/viewReportMember?id=" + reportId.value + "&username=" + '' + "&guardian=" + '' + "&birth=" + '').then((res) => {
      Doctor.value=res.data.data.contents.doctor;
      Doctor1.value=res.data.data.contents.doctor1;
      if (res.data.data.times) {
        let parsedDate = new Date(res.data.data.times);
        let targetDateObj = new Date('2024-01-08');
        if (parsedDate < targetDateObj) {
          times.value = 1;
        } else if (parsedDate > targetDateObj) {
          times.value = 2;
        }
      }
      
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg);
      }
      if (res.data.data.feed_advice) {
       FeedingRecommendations.value = res.data.data.feed_advice
       }
      report_time.value = res.data.data.times;
      contents.value = res.data.data.contents;
      birth.value = res.data.data.contents.birth;
      BMIs.value=res.data.data.bmi;
      diseases.value = res.data.data.contents.Childhooddiseases.length;
      diseasess.value = res.data.data.contents.Childhooddiseases[0];
    });




    Titlename.value = localStorage.getItem('Title');
    setTimeout(() => {
      print("#pdfDom1");
    }, 2000);
    const res = await api.getonediet({ id: route.params.reportId });
    if (res.data.code == 1) {
      Opinion_1.value = res.data.data.早餐;
      Opinion_2.value = res.data.data.早点;
      Opinion_3.value = res.data.data.午餐;
      Opinion_4.value = res.data.data.午点;
      Opinion_5.value = res.data.data.晚餐;
      Opinion_6.value = res.data.data.晚点;
    }



  } else {
    ElMessage.error("栏目编号不得为空");
    await router.push({ path: "/Home" });
  }
};

onMounted(() => {
  fetchData();
});
</script>
  
<style scoped>
@import "../assets/css/common.css";
@media screen and (max-width: 1920px) {
  .right-box-card .all button {
    width: 85px;
    margin-right: 14px;
  }

  .el-drawer__body .drVal {
    padding-top: 50px;
  }
}

.dietOn {
  height: 500px;
}

.time-botton {
  background-color: #2ab28b;
  width: 108px;
  height: 41px;
  color: #fff;
  font-size: 16px;
  border-radius: 100px;
  line-height: 41px;
  margin: 40px 0 0 40px;
  text-align: center;
}

.plates {
  width: 33%;
  float: left;
}

.time-type {
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: #85ce61;
  border-radius: 50%;
  opacity: 1;
  color: #fff;
  box-shadow: 5px 5px 2px #888888;
  margin: 20px 0 20px 40%;
}

.time-left-color {
  background: #85ce61;
}

.time-common-color {
  background: #E8B973;
}

.time-right-color {
  background: #6EA9E0;
}

.der {
  width: 354px;
  height: 241px;
  background: url("../assets/img/evaluaction_service_plate.png") 100% 100%;
}

.plates .plates-top-img {
  float: left;
  margin-left: 1%;
}

.platesFoods {
  margin-top: 5px;
  margin-left: 8px;

  color: #333333;
  font-size: 16px;
}

.platesFoods div {
  padding-bottom: 18px;
}

.platesFoods span {
  color: #666666;
}

.foodsNames {
  color: red;
}

.BMIprimary {
  width: 268px;
  height: 70px;
  background: #2ab28b;
  opacity: 1;
  border-radius: 8px;
  font-size: 24px;
}

.BMIDefault {
  width: 268px;
  height: 70px;
  background: #fff;
  opacity: 1;
  color: #2ab28b;
  border-radius: 8px;
  font-size: 24px;
  border: 1px solid #2ab28b;
}

.el-drawer__body {
  overflow: auto;
}

.el-drawer__container ::-webkit-scrollbar {
  display: none;
}

::v-deep .el-button:focus,
.el-button:hover {
  background: #2ab28b;
  color: #fff;
}

::v-deep .el-progress-bar__inner {
  background: #2ab28b;
}
</style>
<style>
.right-box-card {
  margin-left: 2%;
  margin-top: 1%;
  position: static;
  top: calc(260px);
  width: 60%;
  float: left;
}

.right-box-card .all span {
  margin-right: 5px;
  font-size: 14px;
}

.right-box-card .all .num1 {
  width: 100px;
  border: none;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #3ea4aa;
}

.num {
  width: 62px;
  border: none;
  text-align: center;
  background: #fff;
}

.right-box-card .all button {
  display: inline-block;
  width: 96px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: #3ea4aa;
  border-radius: 3px;
  color: #ffffff;
  font-size: 16px;
  float: right;
  margin-right: 40px;
  margin-top: 70px;
  border: none;
}</style>
  